<!--
 * @Date: 2024-11-21 15:35:50
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2025-02-18 10:47:09
 * @Description: 数据面板2
-->
<template>
  <div class="data-board-panel second">
    <div class="data-board-body">
      <div class="data-board-item">
        <div class="item-value text-over-ellipsis">
          <CountRoll
            :value="data[dataKeys.v1] || 0"
            :class="[ eventFuncHook.onClickClass() ]"
            @click="eventFuncHook.onClick(data)"
          />
        </div>
        <div class="item-label text-over-ellipsis">
          <span>{{ schema.label }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { commonProps } from '@hp/panels/cfg.js'
import { watch, ref, computed, onMounted, nextTick } from 'vue'; 

import { useDbSource } from '@hp/hooks/useDbSource.js'
import { useEventFunc } from '@hp/hooks/useEventFunc.js'

import CountRoll from '@hp/comps/count-roll'

const emits = defineEmits([ 'mounted' ])
const props = defineProps({ ...commonProps })

// 数据源
const data = ref({})
// 数据的关键字
const dataKeys = computed(() => {
  return props.schema.dataKeys
})
// 数据源相关操作
const dbsourceHook = useDbSource({ ...props })
// 事件函数相关操作
const eventFuncHook = useEventFunc({ ...props })
/**
 * 加载数据
 */
const loadData = async () => {
  data.value = {}
  const res = await dbsourceHook.loadDataSource(props.schema)
  data.value = res || {}
}
/**
 * 重新加载数据
 * 
 * @param params 额外参数
 */
const reloadData = async (params) => {
  const res = await dbsourceHook.loadDataSource(props.schema, params)
  data.value = res || {}
}

onMounted(() => {
  nextTick(() => { emits('mounted') })
})

watch(
  () => props.schema.dataSource,
  (nv, ov) => {
    loadData()
  },
  { deep: true, immediate: true }
)

defineExpose({
  loadData,
  reloadData
})


</script>

<style lang="scss" scoped>
@use '@hp/panels/base.scss' as *;
.data-board-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  &.second {
    .data-board-body {
      flex: 1;
      min-height: 10px;
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .data-board-item {
      text-align: center;
      width: 100%;
      padding: 0 20px;
      .item-label {
        font-size: 14px;
      }
      .item-value {
        font-size: 30px;
        color: var(--el-color-primary);
        min-width: 60px;
        font-weight: 600;
        margin-bottom: 12px;
      }
    }
  }
}
</style>